<template>
	<div>
		<so-header :title="title"></so-header>
		<mt-index-list>
		  <mt-index-section :index="item.type" v-for="item in textList" v-if="textList.length>0">
		    <a  class="mint-cell" v-for="textEntity in item.list" @click="toRead(textEntity.textContent)">
		    	<span class="mint-cell-mask"></span> 
		    	<div class="mint-cell-left"></div> 
		    	<div class="mint-cell-wrapper">
		    		<div class="mint-cell-title"><!----> 
		    			<span class="mint-cell-text">{{textEntity.textName}}</span> 
		    		</div> 
		    		<!--<div class="mint-cell-value is-link">
		    			<span style="color: green;">这里是元素</span></div>-->
		    	</div>
		    	<div class="mint-cell-right"></div> 
		    	<i class="mint-cell-allow-right"></i>
		    </a>
		  </mt-index-section>
		</mt-index-list>
		<so-footer></so-footer>
	</div>
</template>
<script>
	import {MessageBox }from 'mint-ui'
	import soHeader from 'components/header'
	import soFooter from 'components/footer'
	export default {
		components: {
			soHeader,
			soFooter
		},
		data() {
			return {
				title: "文章列表",
				url : 'getTextList',
				textList : []
			}
		},
		methods: {
			geTextList(){
				var _this=this;
				this.$axios.get(this.url)
				.then((response) =>{
					console.log(response.data);
					for(var p in response.data){
						var item={};
						item.type=p.toLowerCase().substr(0,2);
						item.list=response.data[p];
						this.textList.push(item);
						console.log(p)
					}
//					console.log(this.textList)
				}).catch(()=>{
					MessageBox('提示', '请求失败');
				});
			},
			toRead(textContent){
				this.GLOBAL.textContent=textContent;
				this.$router.push({path:'/read'});
			}
		},
		mounted(){
			this.geTextList();
		}
	}
</script>
<style lang="less">
	.talkButton{
		position: fixed;
		bottom: 60px;
		left: 0;
		text-align: center;
		width: 100%;
	}			
	.layim-chat-main {
	    height: 90%;
	    padding: 10px;
	    overflow-x: hidden;
	    overflow-y: auto;
	}
	.layim-chat-main ul li {
	    position: relative;
	    font-size: 0;
	    padding-left: 0px;
	    padding-right: 10px;
	    min-height: 68px;
	}
	.layim-chat-main ul .layim-chat-mine {
	    text-align: right;
	    padding-left: 0;
	}
	.layim-chat-text {
	    display: inline-block;
	    vertical-align: top;
	    font-size: 14px;
	}
	.layim-chat-mine .layim-chat-text {
	    margin-left: 0;
	    text-align: left;
	    background-color: #5FB878;
	    color: #fff;
	}
	.layim-chat-text {
	    position: relative;
	    line-height: 22px;
	    margin-top: 25px;
	    padding: 8px 15px;
	    background-color: #e2e2e2;
	    border-radius: 3px;
	    color: #333;
	    word-break: break-all;
	    max-width: 462px\9;
	}
	.layim-chat-text:after {
	    content: '';
	    position: absolute;
	    left: -10px;
	    top: 13px;
	    width: 0;
	    height: 0;
	    border-style: solid dashed dashed;
	    border-color: #e2e2e2 transparent transparent;
	    overflow: hidden;
	    border-width: 10px;
	}
	.layim-chat-mine .layim-chat-text:after {
	    left: auto;
	    right: -10px;
	    border-top-color: #5FB878;
	}
	.button {
		font-size: 18px;
		font-weight: normal;
		text-decoration: none;
		display: block;
		text-align: center;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		color: #FFF;
		background-color: #FFCC33;
		border: 1px solid #ECB100;
		padding: .5em 0em;
		margin: .5em .7em;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	.button:active {
		outline: 0;
	  	-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	}
</style>